<template>
    <div class="divBox">
      <h1 style="font-size:18px;margin-bottom:15px;">人员情况统计</h1>
      <el-row :gutter="24" class="mb10">
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">人员类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="personTypeList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">人员政治面貌</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="zzmmList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">人员学历</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="educationList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb10">

        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">人员岗位层级</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="positionLevelList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">干部衔级</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="rankTitleList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">士兵衔级</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="genderList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">人员年度考评等次情况统计</div>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataPersonCheck" :seriesData="seriesPersonCheck" :xAxis="xAxisPersonCheck" :legendData="legendDataPersonCheck"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <h1 style="font-size:18px;margin-bottom:15px;">个人电子设备情况统计</h1>
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">个人电子设备类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesElc"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="12">
          <h1 style="font-size:18px;margin-bottom:15px;">技术阵地/厂房情况统计</h1>
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">技术阵地/厂房类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesWorkshop"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <h1 style="font-size:18px;margin-bottom:15px;" hidden>试验情况统计</h1>
      <el-row :gutter="24" class="mb20" hidden>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">试验类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesTests"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  chartPersonPie,
  chartElcPie,
  chartPointPie,
  chartWorkshopPie,
  chartModelTypePie,
  chartTestsPie,
  chartTestsMtLine,
  chartPersonCheckLine, zzmmPie, educationTextPieCount, positionLevel, personTypePieCount,officerPieCount,soldierRankTitlePieCount
} from '@/api/dashboard'
  import echartsFrom from '@/components/echarts/index';
  import { checkPermi } from "@/utils/permission"; // 权限判断函数

  export default {
    components: {echartsFrom},
    data() {
      return {
        infoList: null,
        zzmmList:[],
        educationList:[],
        positionLevelList:[],
        rankTitleList:[],
        genderList:[],
        personTypeList:[],
        seriesPerson:[],
        seriesElc:[],
        seriesPoint:[],
        seriesWorkshop:[],
        seriesModelType:[],
        seriesTests:[],

        visitDate: null,
        yearList:[],
        //人员考评等次
        seriesPersonCheck: [],
        xAxisPersonCheck: [],
        legendDataPersonCheck: [],
        yAxisDataPersonCheck:[],

        //各型号试验数
        seriesTestsMt: [],
        xAxisTestsMt: [],
        legendDataTestsMt: [],
        yAxisDataTestsMt:[],

        yAxisData: [],
      }
    },
    mounted(){
      this.initYearList()
      this.initChart1()
    },
    methods: {
      checkPermi,
      initYearList(){
        let date = new Date()
        let year = date.getFullYear()
        for (let i=0;i<10;i++){
          this.yearList.push(year - i)
        }
        this.visitDate = year
      },
      initChart1() {

      },
      //饼图
      statisticsPersonPie(){
        zzmmPie().then(async res=>{
          this.zzmmList = res
        })
        educationTextPieCount().then(async res=>{
          this.educationList = res
        })
        positionLevel().then(async res=>{
          this.positionLevelList = res
        })
        personTypePieCount().then(async res=>{
          this.personTypeList = res
        })
        officerPieCount().then(async res=>{
          this.rankTitleList = res
        })
        soldierRankTitlePieCount().then(async res=>{
          this.genderList = res
        })
      },
      statisticsElcPie(){
        chartElcPie().then(async res => {
          this.seriesElc = res;
        })
      },
      statisticsPointPie(){
        chartPointPie().then(async res => {
          this.seriesPoint = res;
        })
      },
      statisticsWorkshopPie(){
        chartWorkshopPie().then(async res => {
          this.seriesWorkshop = res;
        })
      },
      statisticsModelTypePie(){
        chartModelTypePie().then(async res => {
          this.seriesModelType = res;
        })
      },
      statisticsTestsPie(){
        chartTestsPie().then(async res => {
          //暂时隐藏
          //this.seriesTests = res;
        })
      },
      //柱状图
      chartPersonCheck() {
        this.xAxisPersonCheck = []
        this.legendDataPersonCheck = []
        chartPersonCheckLine().then(async res => {
        //后期接口调用
        /*let res = {
          "2019":[10,20,30,40],"2020":[20,10,40,30],"2021":[15,15,20,30],"2022":[30,20,40,25],
        };*/

        //this.info = res
        let nums1 = []
        let nums2 = []
        let nums3 = []
        let nums4 = []
        for (let key  in res) {
          nums1.push(Number(res[key][0]))
          nums2.push(Number(res[key][1]))
          nums3.push(Number(res[key][2]))
          nums4.push(Number(res[key][3]))
          this.xAxisPersonCheck.push(key)
        }
        this.legendDataPersonCheck = ['优秀','及格','基本及格','不及格']
        this.seriesPersonCheck = [{
          name:"优秀",
          type:"bar",
          stack: 'Ad',
          barWidth: '100px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#73c0de',
            }
          },
          data: nums1
          }, {
            name:"及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#91cc75',
              }
            },
            data: nums2
          }, {
            name:"基本及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#fac858',
              }
            },
            data: nums3
          }, {
            name:"不及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#ee6666',
              }
            },
            data: nums4
        }]
        })
      },
      chartTestsMt(year) {
        this.xAxisTestsMt = []
        this.legendDataTestsMt = []
        chartTestsMtLine({year:year}).then(async res => {
        //this.info = res
        let nums = []
        for (let key  in res) {
          nums.push(Number(res[key]))
          this.xAxisTestsMt.push(key)
        }
        //this.legendDataTestsMt = ['优秀','及格','基本及格','不及格']
        this.seriesTestsMt = [{
          //name:"优秀",
          type:"bar",
          barWidth: '100px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#73c0de',
            }
          },
          data: nums
        }]
        })
      },

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      }
    },
    created() {
      this.statisticsPersonPie()
      this.statisticsElcPie()
      this.statisticsPointPie()
      this.statisticsWorkshopPie()
      this.statisticsModelTypePie()
      this.statisticsTestsPie()

      this.chartPersonCheck()

      let date = new Date()
      let year = date.getFullYear()
      this.chartTestsMt(year)

      // this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 2px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
